<template>
	<view class="contain">
				<tm-form
				class="main"
				@submit="submit"
				ref="formData">
					<tm-input name="title" required title="账号" v-model="reqData.username"></tm-input>
					<tm-input name="price" required title="密码" input-type="digit" v-model="reqData.password"></tm-input>
					<view class="btn_group">
						<tm-button class="btn" navtie-type="form" theme="bg-gradient-blue-accent" block>登录</tm-button>
						<tm-button class="btn" theme="bg-gradient-blue-accent" block @click="register">注册</tm-button>
					</view>
				</tm-form>
				<!-- 消息提示框 -->
				<tm-message ref="toast"></tm-message>
	</view>
</template>

<script>
	import axios from 'axios'
	export default {
		name:"login",
		data() {
			return {
				reqData:{
					username:"",
					password:"",
				}
			}
		},
		onReady() {
		
		},
		onLoad(option) {
			console.log("携带的参数是",option);
			this.txt = this.$NavHide()
		},
		methods: {
			submit(val){
				if(val){
				  axios({
						url:'http://119.23.228.42:8004/api/login',
						method:"POST",
						data:this.reqData
					}).then(res=>{
				      if(res.data.status == 0){
						  uni.setStorageSync("userinfo",JSON.stringify(this.reqData))
						  uni.switchTab({
						  	url:`/pages/index/index`,
						  })
					  }else{
					   uni.showToast({
					   	title:`${res.data.message}`,
						icon:'error'
					   })
					  }
					})
					
				}
			},
			register(){
		    uni.navigateTo({
		    	url:'/pages/register/register'
		    })
			}
		}
	}
</script>

<style lang="scss">
	.contain{
		position: relative;
		width:100vw;
		height: 100vh;
		background: url('../../static/img/loginBg.webp') no-repeat;
		background-size: cover;
		.main{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-70%);
			background-color: rgba(229, 244, 241,0.1);
			box-shadow:2px 2px 10px #95a5a6 ;
			.btn_group{
				padding: 20rpx 30rpx;
				.btn{
					margin-bottom: 20rpx;
				}
			}
			::v-deep .white{
				background-color: transparent !important;
			}
			::v-deep .border-grey-lighten-4-b-1{
				border-bottom: 0;
			}
			}
	}

</style>
